<template>
  <!-- elememt plus 图标库 -->
  <i v-if="isShowIconSvg" class="el-icon">
    <component :is="getIconName" />
  </i>
  <!-- 本地引入svg图标使用 -->
  <svg
    v-else
    aria-hidden="true"
    class="svg-icon"
    :style="'width:' + size + ';height:' + size"
  >
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script setup lang="ts">
const props = defineProps({
  // svg 图标组件名字
  name: {
    type: String,
  },
  prefix: {
    type: String,
    default: "icon",
  },
  iconClass: {
    type: String,
    required: false,
    default: "",
  },
  color: {
    type: String,
    default: "",
  },
  size: {
    type: String,
    default: "1em",
  },
});

const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);

// 用于判断 element plus 自带 svg 图标的显示、隐藏
const isShowIconSvg = computed(() => {
  return props?.name?.startsWith("ele-");
});

// 获取 icon 图标名称
const getIconName = computed(() => {
  return props?.name as string;
});
</script>

<style scoped>
.svg-icon {
  display: inline-flex;
  justify-content: center;
  width: 24px !important;
  height: 1em;
  margin-right: unset !important;
  overflow: hidden;
}
</style>
